<template>
  <div>
    <el-button type="primary" @click="showAddDialod">添加章节</el-button>
    <!-- 章节列表 -->
    <ul class="chapterList">
      <li
        v-for="chapter in chapters"
        :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="handleSaveVideoDialog(chapter)">添加课时</el-button>
            <el-button type="text" @click="handleShowEditChapterDialog(chapter)" >编辑</el-button>
            <el-button type="text" @click="handleDeleteChapter(chapter)" >删除</el-button>
          </span>
        </p>
        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li
            v-for="video in chapter.videos"
            :key="video.id">
            <p>
              {{ video.title }}
              <el-tag v-if="!video.videoSourceId" size="mini" type="danger">
                {{ '尚未上传视频' }}
              </el-tag>
              <span class="acts">
                <el-tag v-if="video.free" size="mini" type="success">{{ '免费观看' }}</el-tag>
                <el-button type="text" @click="handleShowEditVideoDialog(video)">编辑</el-button>
                <el-button type="text" @click="handleDeleteVideo(video)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 章对话框 -->
    <chapter-from ref="chapterDialog" />
    <!-- 课时对话框 -->
    <video-from ref="videoDialog" />
    <div style="margin-top:50px;text-align:center">
      <el-button :disabled="disabled" type="primary" @click="prev">上一步</el-button>
      <el-button :disabled="disabled" type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>
<script>
import chapterFrom from '@/views/course/components/step2/chapterFrom'
import videoFrom from '@/views/course/components/step2/videoFrom'
import videoApi from '@/api/video'
import chapterApi from '@/api/chapter'
export default {
  components: {// 注册页面
    chapterFrom,
    videoFrom
  },
  data() {
    return {
      disabled: false,
      chapters: []
    }
  },
  created() {
    this.getChaptersAndVideos()
  },
  methods: {
    // 删除课时
    handleDeleteVideo(video) {
      this.$confirm(`此操作将永久删除${video.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发起删除请求
        videoApi.delete(video.id).then(r => {
          this.$message.success('删除成功')
          // 刷新
          this.getChaptersAndVideos()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 更新课时回显弹出对话框按钮单击事件
    handleShowEditVideoDialog(video) {
      this.$refs.videoDialog.open(video.id)
    },
    // 新增课时按钮单击事
    handleSaveVideoDialog(chapter) {
      console.log(chapter.courseId)
      console.log(this.$parent.courseId)
      this.$refs.videoDialog.title = '新增课时'
      this.$refs.videoDialog.video.chapterId = chapter.id// 为课时 添加章id
      this.$refs.videoDialog.video.courseId = this.$parent.courseId// 为课时 添加课程id
      this.$refs.videoDialog.dialogFormVisible = true
    },
    handleDeleteChapter(chapter) { // 删除章
    // 如果章有课时 不让删除
      if (chapter.videos.length > 0) {
        this.$message.warning('请先删除该章的课时')
        return
      }
      this.$confirm(`此操作将永久删除${chapter.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发起删除请求
        chapterApi.delete(chapter.id).then(r => {
          this.$message.success('删除成功')
          // 刷新
          this.getChaptersAndVideos()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 回显要编辑的章信息的对话框按钮单击事件
    handleShowEditChapterDialog(chapter) {
      // 希望将chapter的id交给章对话框页面使用，查询到章数据后回显到对话框弹出
      // 在章对话框页面中创建一个函数 接收id参数并查询数据回显
      this.$refs.chapterDialog.open(chapter.id)
    },
    // 查询章课时嵌套集合
    getChaptersAndVideos() {
      chapterApi.getChaptersAndVideos(this.$parent.courseId).then(r => {
        this.chapters = r.data.items
      })
    },
    // 添加章节单击事件
    showAddDialod() {
      // 修改引入的chapterFrom的dialogFormVisible为true
      this.$refs.chapterDialog.dialogFormVisible = true
      this.$refs.chapterDialog.title = '新增章节'
    },
    prev() {
      this.disabled = true
      this.$parent.active = 0
    },
    next() {
      this.disabled = true
      this.$parent.active = 2
    }
  }
}
</script>
<style>
.chapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapterList li{
  position: relative;
}
.chapterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chapterList .acts {
    float: right;
    font-size: 14px;
}

.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dashed #DDD;
}
</style>

